<template>
  <div fluid grid-list-md class="agent-query-container">
    <v-layout row wrap align-content-start>
      <v-flex md12>
        <v-btn icon class="mx-1" @click="$router.push(backUrl)">
          <v-icon>keyboard_backspace</v-icon>
        </v-btn>
        <span class="title ml-4">玩家「{{nickname}}」红包详情</span>
      </v-flex>

      <v-flex row md12 justify-center xs12 class="overflow-table">
        <div class="table-container pos-abs"> 
          <v-card class="custom-table-wrapper">
            <table cellspacing="0" cellpadding="0" border="0" class="custom-table">
              <thead>
                <tr>
                  <th v-for="(item, i) of headers" :key="i">
                    <div>{{item.text}}</div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr class="datatable__progress" v-if="showProgress">
                    <th :colspan="headers.length" class="column">
                      <div class="progress-linear" style="height: 5px;">
                        <div
                          class="progress-linear__background teal"
                          style="height: 5px; opacity: 0.3; width: 100%;"
                        ></div>
                        <div class="progress-linear__bar">
                          <div
                            class="progress-linear__bar__indeterminate progress-linear__bar__indeterminate--active"
                          >
                            <div class="progress-linear__bar__indeterminate long teal"></div>
                            <div class="progress-linear__bar__indeterminate short teal"></div>
                          </div>
                        </div>
                      </div>
                    </th>
                  </tr>
                <tr v-for="item of tableData" :key="item.id">
                  <td>{{getTime(item.time)}}</td>
                  <td>{{item.price}}</td>
                  <td
                    class="text-xs-center subheading"
                    :style="{'font-weight': item.status == 0 || item.status == 3 ? 'bolder' : 'normal' }"
                  >{{ redStatus[item.status] }}</td>
                </tr>
                <tr>
                  <td colspan="1" class="title">已获得红包共计: {{extraTr.totalPrice}}</td>
                  <td colspan="1" class="title">已兑换: {{extraTr.cashPrice}}</td>
                  <td colspan="1" class="title">未兑换余额: {{extraTr.unCashPrice}}</td>
                </tr>
                <tr v-if="tableData.length === 0">
                  <td :colspan="headers.length" class>
                    <div  class="text-md-center">
                      <i aria-hidden="true"
                        class="icon yellow--text text--darken-3 material-icons"
                      >warning</i>
                      <span  class="subheading">暂无数据</span>
                    </div>
                  </td>
                </tr>
                <!-- <tr class="sum-row"></tr> -->
              </tbody>
            </table>
          </v-card>
          <div class="text-xs-center my-2">
            <v-pagination
              @input="pageChange"
              circle
              :length="pagination.pageCount"
              :total-visible="pagination.totalVisible"
              v-model="pagination.page"
            ></v-pagination>
          </div>
        </div>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
import { redpacket } from "../../api/activity";
import { getTime } from "../../util";
export default {
  data: () => ({
    showProgress: false,
    limit: 10,
    offset: 0,
    isSearch: false,
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    // 实际发送查询条件
    nickname: "",
    tableData: [],
    headers: [
      { text: "获得时间", value: "lftid", align: "center", sortable: false },
      { text: "金额", value: "headUrl", align: "center", sortable: false },
      { text: "状态", value: "nickname", align: "center", sortable: false }
    ],
    extraTr: {
      totalPrice: 0,
      cashPrice: 0,
      unCashPrice: 0
    },
    redStatus: {
      '0': '未兑换',
      '1': '已兑换',
      '2': '取消兑换',
      '3': '未申请兑换',
    },
    backUrl: '/activity/redpacket'
  }),
  mounted() {
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.refresh();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.refresh();
      });
    });
    this.uid = this.$route.query.uid;
    this.nickname = this.$route.query.name;
    this.getPlayerRedpacketDetail();
    if(this.$route.query.from == 'bonusrecord') {
      this.backUrl = `/activity/bonusdetail?uid=${this.uid}&name=${encodeURI(this.nickname)}`
    }
  },
  methods: {
    getTime,
    refresh() {
      this.isSearch = false;
      this.offset = 0;
      this.chipSelected = 1;
      this.pagination.page = 1;
      this.getPlayerRedpacketDetail();
    },
    // 获取代理列表
    getPlayerRedpacketDetail() {
      const qs = {
        limit: this.limit,
        offset: this.offset,
        uid: this.uid
      };
      this.showProgress = true;
      redpacket.getPlayerRedpacketDetail.r(qs).then(({ data }) => {
        if (data.result === 0) {
          let $data = data.data;
          if ($data) {
            let rankData = $data.voList;
            this.tableData = rankData;
            this.extraTr.totalPrice = $data.totalPrice;
            this.extraTr.cashPrice = $data.cashPrice;
            this.extraTr.unCashPrice = $data.unCashPrice;
            this.pagination.pageCount = $data.totalRow
              ? Math.ceil($data.totalRow / this.limit)
              : 1;
          }
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    initialize() {
      this.tableData = [
        {
          headUrl: "https://countryflags.io/cn/flat/32.png",
          lftid: 103214,
          nickname: "搭街坊",
          superId: 123000,
          saleLevel: 1,
          sales: 888,
          proxyLevel: 1,
          createTime: "2018-4-19",
          totalSale: 3655,
          ranking: 1,
          color: "red"
        }
      ];
    },
    pageChange(page) {
      this.offset = (page - 1) * this.limit;
      if (!this.isSearch) {
        this.getPlayerRedpacketDetail();
      } else {
        // ***
        this.search("wyvj");
      }
    },
    chipClicked(item) {
      this.chipSelected = item.value;
      this.pagination.page = 1;
        this.offset = 0;
  
      this.getPlayerRedpacketDetail();
    }
  }
};
</script>
<style lang="less" scoped>
</style>